<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>整体填报进度</title>
</head>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/echart.min.js"></script>
<script src="/js/axios.min.js"></script>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<body>
    <div id = "app">
        <div id="main" style="width: 1000px;height:400px; margin: 0 auto"></div>
    </div>
    <script>
        let myChart = echarts.init(document.getElementById('main'));
        axios.get('/api/peoplecount').then(function(res){
            data = res.data
            let nowcountArr = [];
            let capacityArr = [];
            let overstepArr = [];
            let num;
            for (let i in data) {
                if(data[i].nowcount > data[i].capacity){
                    num = data[i].nowcount - data[i].capacity;  //计算超出人数
                } else {
                    num = 0;
                }
                overstepArr.push(num); //将超出人数添加到数组
                nowcountArr.push(data[i].capacity); //将预估人数添加到数组
                capacityArr.push(data[i].nowcount); //将填报人数添加到数组
            }

// 基于准备好的dom，初始化echarts实例

// 指定图表的配置项和数据
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // Use axis to trigger tooltip
                        type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
                    }
                },
                legend: { //图列
                    data: ['以填报人数', '预估人数', '超出人数']
                },
                grid: { //网格
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                yAxis: {
                    type: 'value'
                },
                xAxis: {
                    type: 'category',
                    data: Object.keys(data)
                },
                series: [
                    {
                        type: 'bar',
                        z:2,
                        itemStyle: {
                            color: "rgba(0, 175, 0, 1)"
                        },
                        name: '以填报人数',
                        label: {
                            show: false
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: capacityArr
                    },
                    {
                        barGap: '-100%',
                        name: '预估人数',
                        itemStyle: {
                            color: "rgba(250, 160, 45, 1)"
                        },
                        z: 1,
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        data: nowcountArr
                    },
                    {
                        name: '超出人数',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: false
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            color: "rgba(255, 0, 0, 1)"
                        },
                        data: overstepArr,
                    },
                ]
            };

// 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        })

    </script>
</body>
</html>
